<template>
  <ul class="todo-main">
    <todo-item v-for="todo in todos" :key="todo.id" :todo="todo" :deleteTodo="deleteTodo" :toggleTodo="toggleTodo"/>
  </ul>
</template>

<script>
import TodoItem from './TodoItem.vue'
export default {
  name: 'TodoList',
  /* 
  声明接收属性(三种写法) => 接收的所有属性都会成为组件对象的属性
  1. 数组  [属性名]
  2. 对象: {属性名: 属性值类型}
  3. 对象: {属性名: {type: 属性值类型, required: true}}
  */
  props: ['todos', 'deleteTodo', 'toggleTodo'],


  components: {
    TodoItem
  }
}
</script>

<style scoped>
.todo-main {
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0px;
}
</style>
